zeek67(index.js and index.html ,about.html , services.html , contact.html )
index.js
//In this nodejs we have made a page with fully working navbar by nodejs using custom
backend.
//Steps to create custom backend
//1- Set (http and fs) setup by require.
//2-Use nodejs site about and copy paste code.
//3-Create html pages and link them to js file by fs.readFileSync
//4-Write url=req url; to create url .
//5- Use if and else statement to create conditions for url to work for different
pages.
//6-Run the server.
//1- Set (http and fs) setup by require.
const http = require('http');
const fs= require('fs');
const hostname = '127.0.0.1';
const port = 3000;
//Making html pages and linking them
const home= fs.readFileSync('./index.html');
const about= fs.readFileSync('./about.html');
const services= fs.readFileSync('./services.html');
const contact= fs.readFileSync('./contact.html');
const server = http.createServer((req, res) => {
//Requesting a url
console.log(req.url);
url = req.url;
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
//Setting conditions for different pages url
if (url=="/"){
res.end(home); //This means if url is / then display index.html
}
else if (url=="/about.html"){
res.end(about);
}
else if (url=="/services.html"){
res.end(services);
}
else if (url=="/contact.html"){
res.end(contact);
}
else{res.statusCode = 404;
console.log("page not found");}
});
//Running server
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
index.html
<!DOCTYPE html>
<html lang="en">
<!-- Tough Web Learn by doing. -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<style>.....</style> /* bottom of blog*/
</head>
<body>
<header>
<nav class="navBar" >
<ul>
<li> <a href="/">Home</a></li>
<li> <a href="/about.html">About</a> </li>
<li> <a href="/services.html">Services</a> </li>
<li> <a href="/contact.html"> Contact us</a></li>
</ul>
</nav>
</header>
<h1>This is Home Page.</h1>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<!-- Tough Web Learn by doing. -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<style>......</style> /* bottom of blog*/
</head>
<body>
<header>
<nav class="navBar" >
<ul>
<li> <a href="/">Home</a></li>
<li> <a href="/about.html">About</a> </li>
<li> <a href="/services.html">Services</a> </li>
<li> <a href="/contact.html"> Contact us</a></li>
</ul>
</nav>
</header>
<h1>This is About Page.</h1>
</body>
</html>
services.html
<!DOCTYPE html>
<html lang="en">
<!-- Tough Web Learn by doing. -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services</title>
<style>....</style> /* bottom of blog*/
</head>
<body>
<header>
<nav class="navBar" >
<ul>
<li> <a href="/">Home</a></li>
<li> <a href="/about.html">About</a> </li>
<li> <a href="/services.html">Services</a> </li>
<li> <a href="/contact.html"> Contact us</a></li>
</ul>
</nav>
</header>
<h1>This is Services Page.</h1>
</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="en">
<!-- Tough Web Learn by doing. -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<style>....</style> /* bottom of blog*/
</head>
<body>
<header>
<nav class="navBar" >
<ul>
<li> <a href="/">Home</a></li>
<li> <a href="/about.html">About</a> </li>
<li> <a href="/services.html">Services</a> </li>
<li> <a href="/contact.html"> Contact us</a></li>
</ul>
</nav>
</header>
<h1>This is Contact Page.</h1>
</body>
</html>
<style>......</style>
<style>
h1{padding-left: 600px;
color: green;}
.navBar{
background-color: rgb(165, 165, 223);
padding: 1px 10px;
border-radius: 15px; }
.navBar ul{overflow: auto;}
.navBar li{float: left;
list-style-type: none;
margin: 2px 10px; }
.navBar li a{text-decoration: none;
color: rgb(8, 23, 235);
font-weight: bold;
font-size: 23px;}
.navBar li a:hover{background-color: yellow;
color: rgb(104, 16, 0);}
</style>
Comments
Post a Comment